<script lang="ts" setup>


import { ref, reactive, onBeforeMount } from 'vue';
import { cacheStore, } from '@/stores/cache'
import { useDark, } from '@vueuse/core'
import { dataStore } from '@/stores/data'
import { useRouter, useRoute } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import dapi from '@/api/dynamic'
import capi from '@/api/comment'
import rapi from '@/api/reply'
import { ElMessage } from 'element-plus'
import { ChatDotRound, UserFilled } from '@element-plus/icons-vue'
import Comment from '@/components/Comment.vue'

const { formateDate, randomRgb, avatarimg, increment, BrowserInfo } = dataStore()
const isDark = useDark()
const router = useRouter()
//路由跳转后，页面回到顶部
router.afterEach(() => {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
})
// import { toRaw } from '@vue/reactivity'
const { dynamic, ruleForm } = cacheStore()
const mianfrom = ref(true)
const commentfrom = ref(-1)
const replyfrom = ref(-1)
const conment = reactive({ data: [] }) as any
const dylength = ref(0)
dapi.single({ a_id: router.currentRoute.value.params.id }).then((res: any) => {     //查询文章详情
    dylength.value = res.data.data.length
    if (res.data.data.length !== 0) {
        dynamic.a_id = res.data.data[0].a_id
        dynamic.u_id = res.data.data[0].u_id
        dynamic.a_title = res.data.data[0].a_title
        dynamic.a_views = res.data.data[0].a_views
        dynamic.a_comment_count = res.data.data[0].a_comment_count
        dynamic.a_date = res.data.data[0].a_date
        dynamic.a_like_count = res.data.data[0].a_like_count
        dynamic.ds_id = res.data.data[0].ds_id
        dynamic.a_content = res.data.data[0].a_content
        dynamic.a_cover = res.data.data[0].a_cover
        dynamic.dl_id = res.data.data[0].dl_id
        dynamic.dl_name = res.data.data[0].dl_name
        dynamic.ds_name = res.data.data[0].ds_name
        dynamic.a_abstract = res.data.data[0].a_abstract
    }
}).catch(err => {
    console.log(err);
})
if (dynamic.a_id !== undefined) {
    capi.single({ a_id: router.currentRoute.value.params.id }).then((res: any) => {     //查询评论
        conment.data = res.data.data
    }).catch(err => {
        console.log(err);
    })
}


const replyForm = reactive({        //声明变量  添加回复数据
    a_id: Number(router.currentRoute.value.params.id),
    c_id: null,
    r_email: ruleForm.c_email,
    r_username: ruleForm.c_username,
    r_blog: ruleForm.c_blog,
    r_content: ruleForm.c_content,
    r_avatar: '',
    r_reply_id: '',
    r_reply_username: '',
    r_date: formateDate(new Date()),
    r_platform: BrowserInfo().osName

})
const commentform = async (formEl: FormInstance | undefined) => {         //添加评论表单
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            ruleForm.c_platform = BrowserInfo().osName
            ruleForm.c_date = formateDate(new Date())
            ruleForm.a_id = router.currentRoute.value.params.id
            increment()
            ruleForm.c_avatar = avatarimg.img
            capi.add(ruleForm).then((res: any) => {
                conment.data.push(ruleForm)
                ElMessage({ message: res.data.message, type: 'success', })

            }).catch(err => {
                console.log(err);
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
const replyform = async (formEl: FormInstance | undefined) => {             //添加回复表单
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            replyForm.r_email = ruleForm.c_email
            replyForm.r_username = ruleForm.c_username
            replyForm.r_blog = ruleForm.c_blog
            replyForm.r_content = ruleForm.c_content
            increment()
            replyForm.r_avatar = avatarimg.img
            rapi.add(replyForm).then((res: any) => {
                ElMessage({ message: res.data.message, type: 'success', })
                for (let i = 0; i < conment.data.length; i++) {
                    if (replyForm.c_id === conment.data[i].c_id) {
                        conment.data[i].child.push(replyForm)
                    }
                }
                replyForm.r_reply_id = '';
                ruleForm.c_content = '';
            }).catch(err => {
                console.log(err);
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const commentbtn = (item: any, index: any) => {          //点击评论按钮事件
    mianfrom.value = false
    commentfrom.value = index
    replyfrom.value = -1
    replyForm.c_id = item.c_id
}
const replybtn = (rtem: any, r: any) => {          //点击回复按钮事件
    mianfrom.value = false
    commentfrom.value = -1
    replyfrom.value = rtem.r_id
    replyForm.c_id = rtem.c_id
    replyForm.r_reply_id = rtem.r_id
    replyForm.r_reply_username = rtem.r_username
}


</script>
<template>
    <el-card v-if="dylength === 0">
        <el-empty description="暂无数据" />
    </el-card>
    <div v-else>


        <el-card>
            <div class="padding bordert">
                <h3>{{ dynamic.a_title }}</h3>
                <el-space :size="30" v-for="item in dynamic.dl_name" :key="item.dl_id">
                    <el-button checked class="btn" size="small" :style="randomRgb()" @click="router.push('/tag')"> {{
                        item.dl_name }} </el-button>
                </el-space>
                <p>{{ dynamic.ds_id }}</p>
                <el-space :size="30">分类名称：{{ dynamic.ds_name }} </el-space>
                <el-space :size="30">阅读数量：{{ dynamic.a_views }}</el-space>
                <!-- <el-space :size="30">点赞数量：{{ dynamic.a_like_count }}</el-space> -->
                <el-space :size="30">评论总数：{{ dynamic.a_comment_count }}</el-space>
                <el-space :size="30">发布时间：{{ dynamic.a_date }}</el-space>
            </div>
            <div class="padding">
                <p>{{ dynamic.a_abstract }}</p>
            </div>
            <v-md-preview :dark="isDark" ref="preview" :text="dynamic.a_content"></v-md-preview>

        </el-card>
        <el-card class="box-card ">
            <Comment :ruleForm="ruleForm" @submit-form="commentform" v-if="mianfrom === true" />
            <div class="padding ">
                <div v-for="(item, index ) in conment.data">
                    <div class="replyfrom">
                        <div>
                            <el-avatar v-if="item.c_avatar" :src="item.c_avatar" />
                            <el-avatar v-else :icon="UserFilled" />
                        </div>
                        <div>
                            <div>
                                <el-space :size="30">{{ item.c_username }} </el-space>
                                <el-space :size="30">{{ item.c_date }} </el-space>
                                <el-space :size="30">{{ item.c_platform }} </el-space>
                            </div>
                            <div class="reply">
                                <p>{{ item.c_content }} </p>
                                <p @click="commentbtn(item, index)"><el-icon>
                                        <ChatDotRound />
                                    </el-icon></p>
                            </div>
                        </div>
                    </div>
                    <Comment :ruleForm="ruleForm" @submitForm="replyform" v-if="commentfrom === index" />
                    <div class="avatar" v-if="item.child" v-for="(rtem, r) in item.child" :key="r">
                        <div class="replyfrom ">
                            <div>

                                <el-avatar v-if="rtem.r_avatar" :src="rtem.r_avatar" />
                                <el-avatar v-else :icon="UserFilled" />
                            </div>
                            <div>
                                <div>
                                    <el-space :size="30">{{ rtem.r_username }} </el-space>
                                    <el-space :size="30">{{ rtem.r_date }} </el-space>
                                    <el-space :size="30">{{ rtem.r_platform }} </el-space>
                                </div>
                                <div class="reply">
                                    <p v-if="rtem.r_reply_id === ''">{{ rtem.r_content }} </p>
                                    <p v-else>回复 <span class="chid_reply">@{{ rtem.r_reply_username }}</span>：{{
                                        rtem.r_content
                                    }} </p>
                                    <p @click="replybtn(rtem, r)"><el-icon>
                                            <ChatDotRound />
                                        </el-icon></p>
                                </div>
                            </div>
                        </div>
                        <Comment :ruleForm="ruleForm" @submitForm="replyform" v-if="replyfrom === rtem.r_id" />

                    </div>

                </div>
            </div>

        </el-card>
    </div>
</template>
<style lang="scss" scoped>
.padding {
    margin: 24px 30px;
}

.btn {
    color: #fff;
}

.box-card {
    margin: 10px auto;
}

.bordert {
    * {
        margin: 5px 0;
    }

    border-bottom: 2px solid var(--el-card-border-color)
}

::deep(.v-md-editor-preview) {
    background-color: chocolate;
}

.reply {
    display: flex;
    justify-content: space-between;
}

:deep(.vuepress-markdown-body) {
    color: unset;
    background-color: unset;
}

.avatar {
    margin: 15px 0 15px 50px;
}

.replyfrom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;

    >div:nth-child(1) {
        width: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    >div:nth-child(2) {
        width: 94%;
    }
}


.chid_reply {
    color: var(--el-color-primary);
    margin: 0 5px;
}

@media screen and (max-width: 900px) {
    .padding {
        margin: 5px;
    }

    :deep(.el-space__item) {
        margin-right: 5px !important;
    }

    .avatar {
        margin: 10px 0 10px 20px;
    }

    .replyfrom {
        >div:nth-child(1) {
            width: 20%;
        }

        >div:nth-child(2) {
            width: 79%;
        }
    }

}
</style>